<template>
  <div>
    <el-card>
      <CategorySelect :disabled="spuState !== SpuState.SPU_LIST" />
    </el-card>
    <el-card style="margin-top: 10px">
      <SpuList
        v-if="spuState === SpuState.SPU_LIST"
        @showSpuState="showSpuState"
        @setSpu="setSpu"
      />
      <SpuForm
        v-else-if="spuState === SpuState.SPU_FORM"
        @showSpuState="showSpuState"
        :spu="spu!"
      />
      <SkuForm v-else @showSpuState="showSpuState" />
    </el-card>
  </div>
</template>

<script lang="ts">
  export default {
    name: "Spu",
  };
</script>

<script lang="ts" setup>
  import SpuList from "./components/SpuList.vue";
  import SpuForm from "./components/SpuForm.vue";
  import SkuForm from "./components/SkuForm.vue";
  import { ref } from "vue";
  import { SpuState } from "./spu";
  import type { SpuValueModel } from "@/api/product/model/spuModel";

  const spuState = ref<SpuState>(SpuState.SPU_LIST);
  const spu = ref<SpuValueModel>();
  const showSpuState = (newSpuState: SpuState) => {
    spuState.value = newSpuState;
  };
  // 定义设置新的spu的函数
  const setSpu = (newSpu: SpuValueModel) => {
    spu.value = newSpu;
  };
</script>

<style lang="scss" scoped></style>
